<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>易优名品</title>
    <link rel="stylesheet" href="__LayUI__/css/layui.css">
    <link rel="stylesheet" href="__Admin__/css/admin.scss">
</head>
<body class="layui-layout-body">
<div class="layui-layout layui-layout-admin">
    {include file="layout/head" /}

    {include file="layout/sidebar" /}

    <div class="layui-body">
        <!-- 内容主体区域 -->
        <div id="mainContain">
            <form method="POST" class="layui-form layui-col-xs8"  autocomplete="off">
                <div class="layui-row">
                    <a href="javascript:;"  id="addCarousel">新增轮播</a>
                </div>
             <table class="layui-table" >
                 <colgroup>
                     <col width="150">
                     <col width="200">
                     <col width="200">
                     <col>
                 </colgroup>
                 <thead>
                 <tr>
                     <th>ID</th>
                     <th>链接</th>
                     <th>图片</th>
                     <th>操作</th>
                 </tr>
                 </thead>
                 <tbody id="tbody">
                    <tr>
                        <td><input class="layui-input" type="text" value="1"></td>
                        <td>
                            <input class="layui-input" type="text" value="www.baidu.com">
                        </td>
                        <td>
                            <button type="button" class="layui-btn addImg" name="pic">
                                <i class="layui-icon">&#xe67c;</i>上传图片
                            </button>
                        </td>
                        <td>
                            删除
                        </td>
                    </tr>
                 </tbody>
                 <tfoot>
                 <tr>
                     <td colspan="5">
                         <button class="layui-btn" >立即提交</button>
                     </td>
                 </tr>
                 </tfoot>
             </table>

            </form>
        </div>
    </div>
    {include file="layout/footer" /}
</div>
<script src="__LayUI__/layui.js"></script>
<script src="__Admin__/js/jquery-3.3.1.js"></script>
<script>
    function addCarousel() {
        var table=document.getElementById('tbody');
        var html=document.createElement("tr");
        var td1=document.createElement('td');
        var input1=document.createElement('input');
        input1.setAttribute('class',"layui-input");
        td1.appendChild(input1);
        var td2=document.createElement('td');
        var input2=document.createElement('input');
        input2.setAttribute('class',"layui-input");
        td2.appendChild(input2);
        var td3=document.createElement('td');
        var button=document.createElement('button');
        button.setAttribute("class",'layui-btn addImg');
        button.setAttribute("type","button");
        var i=document.createElement('i');
        i.setAttribute('class','layui-icon');
        i.innerHTML="&#xe67c";
        button.appendChild(i);
        td3.appendChild(button);
        i.after("上传图片");
        var td4=document.createElement('td');
        td4.innerText="删除";
        html.appendChild(td1);
        html.appendChild(td2);
        html.appendChild(td3);
        html.appendChild(td4);
        table.appendChild(html);
    }
    layui.use(['element','form','upload'], function(){
        $(document).on('click','#addCarousel',function(){
            addCarousel();
            var upload=layui.upload;
            upload.render({
                elem: '.addImg' //绑定元素
                ,url: '/index.php/admin/Site_Info/uploadImg' //上传接口
                ,accept: 'images' //允许上传的文件类型
                ,method:'post'
                ,done: function(res){
                    //上传完毕回调
                    var img=document.createElement('img');
                    img.src=res.url;
                    this.elem[0].parentElement.appendChild(img);
                }
                ,error: function(error){
                    //请求异常回调
                    console.log(error);
                }
            });
        });

    });





</script>
</body>
</html>